import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import path from 'path';

export default defineConfig({
  plugins: [
    react({
        // 在 .js 文件中启用 JSX
        include: "**/*.{jsx,js}",
      }),
    // 自动处理 Node.js 核心模块的 polyfill
    nodePolyfills({
      // 是否包含 Node.js 全局变量
      globals: {
        process: true,
        Buffer: true,
      },
      // 包含哪些 polyfill
      include: ['buffer', 'process', 'util', 'stream', 'path', 'querystring', 'timers'],
    }),
  ],
  // 告诉 esbuild 在 .js 文件中处理 JSX
  esbuild: {
    loader: "jsx",
    include: /src\/.*\.js$/,
    exclude: [],
  },
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  resolve: {
    alias: {
      // 添加波浪符号的别名支持
      '~': path.resolve(__dirname, 'node_modules'),
      // 可以添加你的路径别名
      '@': '/src',
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#e62662' },
        // 如果使用了 antd 等库
        plugins: [require('less-plugin-npm-import')],
        // 解决导入路径问题
        paths: [path.resolve(__dirname, 'node_modules')],
      },
    },
  },
  build: {
    outDir: 'build',  // 保持与 CRA 相同的输出目录
    sourcemap: true,
    // 考虑到树莓派的性能限制，可以减少一些优化
    minify: 'esbuild',
    target: 'es2018', // 兼容较旧的浏览器
    // 处理 tensor 模块的兼容性
    commonjsOptions: {
      transformMixedEsModules: true,
    }
  },
  optimizeDeps: {
    include: [
      // 预构建依赖项以加快开发速度
      'react',
      'react-dom',
      'antd',
      '@ant-design/icons',
      'lodash.throttle',
    ],
  },
});